<template>
  <div class="dashboard-editor-container">
  <!--  <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->
   
    <el-row :gutter="32">
		      <el-col :xs="24" :sm="24" :lg="8">
					<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>SIM卡功能状态</span>
					</div>
					<pie-chart />
					</el-card>
		      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <el-card class="box-card">
        <div slot="header" class="clearfix">
        	<span>即将到期卡</span>
        </div>
       <IndexExpire />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <el-card class="box-card">
        <div slot="header" class="clearfix">
        	<span>SIM卡业务状态</span>
        </div>
        <IndexBusinessStatus/>
        </el-card>
      </el-col>
    </el-row>
		
		 <el-row style="background:#f0f2f5;padding:16px 16px 0;margin-top:32px;">
			<el-col :xs="24" :sm="24" :lg="14">
				<el-card class="box-card" >
					<el-row>
	    			<el-col :span='12'>
	    				 <el-tabs v-model="businessName" type='card' @tab-click="changeBusiness">
						    <el-tab-pane label="移动" name="移动"></el-tab-pane>
						    <el-tab-pane label="联通" name="联通"></el-tab-pane>
						    <el-tab-pane label="电信" name="电信"></el-tab-pane>
						  </el-tabs>
	    			</el-col>
	    			<el-col :span='7' :offset='1'>
	    				<!-- 	<span class="demonstration">选择月份</span>-->
						    <el-date-picker
						      v-model="valueMonth"
						      type="month"
						      placeholder="选择月">
						    </el-date-picker>
	    			</el-col>
	    		</el-row>
				<div slot="header" class="clearfix">
					<span>本月GPRS流量</span>
				</div>
				<line-chart :chart-data="lineChartData" :isType='businessName' :valueMonth='valueMonth' />
				</el-card>
			</el-col>
			
			<el-col :xs="24" :sm="24" :lg="10" style='padding-left: 32px;'>
				<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>本月流量消耗TOP5</span>
				</div>
				
				 <el-table :data="topList">
				  <el-table-column label="序号" align="center" type='index' />
				  <el-table-column label="ICCID" align="center" prop="iccid" :show-overflow-tooltip="true" />
				  <el-table-column label="使用流量(MB)" align="center" prop="flowUsed" :show-overflow-tooltip="true" :formatter='formateFlow' />
				</el-table>
				</el-card>
			</el-col>
		</el-row> 
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/indexLineChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import IndexExpire from './dashboard/indexExpire'
import IndexBusinessStatus from './dashboard/indexBusinessStatus'
import {getTop5} from "@/api/system/info";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    PieChart,
    BarChart,
    IndexExpire,
    IndexBusinessStatus
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      topList:[],
      businessName:'移动',   //切换运营商
      valueMonth:new Date(),    //选中的月份
    }
  },
  created(){
  	setTimeout(()=>{
  		this.getTop5Fn();
  	},1000)
  },
  methods: {
  	changeBusiness(tab, event) {  //切换运营商
        this.businessName = tab.name;
        console.log(this.businessName)
      },
  	getTop5Fn(){
  		getTop5().then((res)=>{
  		this.topList = res.list;
  	  })
  	},
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    formateFlow(a){
    	var b = (a.flowUsed*1/1024).toFixed(0);
    	return b;
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
